import AppPortal from '@/components/AppPortal'
import SearchList from '@/components/SearchList'
import { appConfigActions } from '@/store/appConfigSlice'
import { offActions } from '@/store/offSlice'
import { useAppDispatch, useAppSelector } from '@/utils/hooks'
import { divide } from 'lodash'
import { Switch } from 'magic-ui-react'
import SettingItem from './SettingItem/SettingItem'
import styles from './styles.module.less'
const SettingMenu = () => {
  const {
    off: { settingMenu },
    appConfig: {
      systemSettins
    }
  } = useAppSelector((state) => state);
  const dispatch = useAppDispatch();

  return (
    <AppPortal
      visible={settingMenu}
      position="right"
      onClose={() => {
        dispatch(offActions.update({
          settingMenu: false
        }))
      }}
    >
      <div className={styles.SettingMenu}>
        <header className='mt-4 px-4 font-extrabold'>
          设置
        </header>
        <div className='mt-4 px-4 flex flex-col gap-4'>
          <SettingItem
            title={'同步数据'}
            description={(
              <div className='flex gap-3'>
                <div className='flex-1 btn-distant'>
                  同步到本地
                </div>
                <div className='flex-1 btn-distant'>
                  同步到云端
                </div>
              </div>
            )}
          />
          <SettingItem
            title={'搜索引擎'}
            description={(
              <SearchList />
            )}
          />
          <SettingItem
            title={'目标打开方式'}
            description={(
              <div className='flex flex-col'>
                <div className='flex justify-between py-2'>
                  <span>在新标签页中打开网站</span>
                  <Switch
                    checked={systemSettins.openWebsiteInNewTab}
                    onChange={() => {
                      dispatch(appConfigActions.updataSystemSettings({
                        openWebsiteInNewTab: !systemSettins.openWebsiteInNewTab
                      }))
                    }}
                  />
                </div>
                <div className='flex justify-between py-2'>
                  <span>在新标签页中打开搜索结果</span>
                  <Switch
                    checked={systemSettins.openSearchResultInNewTab}
                    onChange={() => {
                      dispatch(appConfigActions.updataSystemSettings({
                        openSearchResultInNewTab: !systemSettins.openSearchResultInNewTab
                      }))
                    }}
                  />
                </div>
              </div>
            )}
          />
          <SettingItem
            title={'图标'}
            description={(
              <div className='flex flex-col'>
                <div className='flex justify-between py-2'>
                  <span>隐藏图标名称</span>
                  <Switch
                    checked={systemSettins.hiddenIconName}
                    onChange={() => {
                      dispatch(appConfigActions.updataSystemSettings({
                        hiddenIconName: !systemSettins.hiddenIconName
                      }))
                    }}
                  />
                </div>
                <div className='flex justify-between py-2'>
                  <span>图标阴影</span>
                  <Switch
                    checked={systemSettins.iconShadow}
                    onChange={() => {
                      dispatch(appConfigActions.updataSystemSettings({
                        iconShadow: !systemSettins.iconShadow
                      }))
                    }}
                  />
                </div>
                <div className='flex justify-between py-2'>
                  <span>图标动画</span>
                  <Switch
                    checked={systemSettins.iconAnimation}
                    onChange={() => {
                      dispatch(appConfigActions.updataSystemSettings({
                        iconAnimation: !systemSettins.iconAnimation
                      }))
                    }}
                  />
                </div>
              </div>
            )}
          />
        </div>
      </div>
    </AppPortal>
  )
}

export default SettingMenu